<template>
  <view class="content" style="background: #f4f5f7;">
    <!-- 头像及右侧信息容器 -->
    <view class="user-info-container">
      <!-- 头像 -->
      <image class="avatar" src="/static/13.png"></image>
      <!-- 右侧信息区域 -->
      <view class="right-info">
        <view class="username-row">
          <!-- 用户名及标识 -->
          <image class="icon" src="/static/14.png"></image>
          <text class="username">alsothank</text>
        </view>
        <view class="stats-row">
          <text class="stat-item">学习时长 1196小时</text>
          <text class="stat-item">经验 11716</text>
        </view>
      </view>
    </view>
    <!-- 粉丝、关注、积分行 -->
    <view class="stats-bottom">
      <view class="stat-bottom-item">
        <text class="stat-bottom-text">粉丝 1</text>
      </view>
      <view class="stat-bottom-item">
        <text class="stat-bottom-text">关注 4</text>
      </view>
      <view class="stat-bottom-item">
        <text class="stat-bottom-text">积分 20</text>
      </view>
    </view>

    <!-- 功能列表大盒子 -->
    <view class="function-box">
      <!-- 购物车功能项 -->
      <view class="function-item" @tap="goToCart">
        <image class="function-icon" src="/static/15.png"></image> 
        <text class="function-text">购物车</text>
        <view class="badge" v-if="cartBadgeCount > 0">{{cartBadgeCount}}</view>
        <image class="arrow-icon" src="/static/27.png"></image> 
      </view>
      <!-- 任务中心功能项 -->
      <view class="function-item" @tap="goToTaskCenter">
        <image class="function-icon" src="/static/16.png"></image> 
        <text class="function-text">任务中心</text>
        <image class="arrow-icon" src="/static/27.png"></image> 
      </view>
    </view>
	
	<view class="function-box">
	  <!-- 购物车功能项 -->
	  <view class="function-item" @tap="goToCart">
	    <image class="function-icon" src="/static/17.png"></image> 
	    <text class="function-text">我的订单</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <!-- 任务中心功能项 -->
	  <view class="function-item" @tap="goToTaskCenter">
	    <image class="function-icon" src="/static/18.png"></image> 
	    <text class="function-text">我的余额</text>
		<view style="margin-right: 20rpx;
		color: red;position: relative;bottom: 2rpx;">63.23元</view>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <view class="function-item" @tap="goToTaskCenter">
	    <image class="function-icon" src="/static/19.png"></image> 
	    <text class="function-text">电子兑换码</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <view class="function-item" @tap="goToTaskCenter">
	    <image class="function-icon" src="/static/20.png"></image> 
	    <text class="function-text">我的优惠券</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <view class="function-item" @tap="goToTaskCenter">
	    <image class="function-icon" src="/static/21.png"></image> 
	    <text class="function-text">我的拼团</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	</view>
	
	
	<!-- 功能列表大盒子 -->
	<view class="function-box">
	  <!-- 购物车功能项 -->
	  <view class="function-item" >
	    <image class="function-icon" src="/static/222.png"></image> 
	    <text class="function-text">企业服务</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <!-- 任务中心功能项 -->
	  <view class="function-item" >
	    <image class="function-icon" src="/static/23.png"></image> 
	    <text class="function-text">意见反馈</text>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	  <view class="function-item" >
	    <image class="function-icon" src="/static/24.png"></image> 
	    <text class="function-text">帮助中心</text>
			<view style="margin-right: 20rpx;
			color: gray;position: relative;bottom: 2rpx;">遇到问题先来这里看看</view>
	    <image class="arrow-icon" src="/static/27.png"></image> 
	  </view>
	</view>
	
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartBadgeCount: 2, // 购物车小红点数量
    };
  },
  methods: {
   
   
  }
};
</script>

<style scoped>
/* 整体容器 */
.content {
  display: flex;
  flex-direction: column;
  padding: 16px; 
  box-sizing: border-box;
}

/* 头像和右侧信息的容器 */
.user-info-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* 头像样式 */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 12px;
}

/* 右侧信息区域 */
.right-info {
  display: flex;
  flex-direction: column;
}

/* 用户名和标识行 */
.username-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

/* 用户名文本 */
.username {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}

/* 小标识图标 */
.icon {
  width: 18px;
  height: 18px;
}

/* 学习时长、经验行 */
.stats-row {
  display: flex;
  color: #666;
  font-size: 14px;
}

/* 学习时长、经验单个项 */
.stat-item {
  margin-right: 16px;
}

/* 底部粉丝、关注、积分行 */
.stats-bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

/* 底部单个统计项容器 */
.stat-bottom-item {
  text-align: center;
}

/* 底部统计项文本 */
.stat-bottom-text {
  color: #333;
  font-size: 14px;
}

/* 功能列表大盒子 - 统一设置边框 */
.function-box {
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 16rpx;
  background-color: #fff;
  overflow: hidden; /* 确保内部元素圆角正确显示 */
}

/* 单个功能项容器 */
.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 38rpx; 
}

/* 为购物车项添加底部边框作为分隔线 */
.function-item:first-child {
  border-bottom: 1px solid #eee;
}

/* 功能项图标 */
.function-icon {
  width: 24px;
  height: 24px; 
  margin-right: 10px; 
}

/* 功能项文本 */
.function-text {
  flex: 1; 
  font-size: 15px;
  color: #333; 
}

/* 小红点样式（购物车用） */
.badge {
  width: 20px;
  height: 20px;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin-right: 10px; 
}

/* 箭头图标 */
.arrow-icon {
  width: 16px;
  height: 16px; 
}
</style>
